<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
	  xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>京夕夕商城--商品详情页</title>
	 <link rel="icon" href="/assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-seckill-item.css" />
    <link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />
    <link rel="stylesheet" type="text/css" href="/css/pop-up-box.css" />

</head>

<body>
	
	<!-- 头部栏位 -->
	<!--页面顶部，由js动态加载-->
	<script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
	<div id="nav-bottom"></div>
    <script type="text/javascript">$("#nav-bottom").load("/page/top");</script>

<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#service").hover(function(){
		$(".service").show();
	},function(){
		$(".service").hide();
	});
	$("#shopcar").hover(function(){
		$("#shopcarlist").show();
	},function(){
		$("#shopcarlist").hide();
	});

})
</script>
<script type="text/javascript" src="/js/widget/cartPanelView.js"></script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/czFunction.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
</body>
	<div class="py-container" id="app">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					
				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom"><img jqimg="/img/_/b1.png" v-bind:src="item.itemImage" style="width: 400px" /></span>
						</div>						
					</div>
					
				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name" >
						<h4>{{item.itemTitle}}</h4>
					</div>
					<div class="news">
						<span><img src="/img/_/clock.png"/>京夕夕品优</span>
						</div>
					<div class="summary">
						<div class="summary-wrap">
							
							<div class="fl title">
								<i>价格</i>
							</div>
							<div class="fl price">
								<i>¥</i>
								<em>{{item.itemPrice}}</em>
							</div>
							<div class="fr remark">
								
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
							</div>
						</div>
					</div>

					<!--  添加购物弹窗	-->
					<div id="hidebg"></div>
					<div id="hidebox" >
						<div class="close" v-on:click="hide();">关闭</div>
						<div id="addCart">
							<span class="img"><img v-bind:src="item.itemImage" style="width: 200px" /></span>
							<h3>{{item.itemTitle}}</h3>
							<div style="clear:both"></div>
							<div class="itemInventory">库存数量: {{item.itemInventory}}</div>
							<div class="num">
								<span>购买数量</span>
								<span type="button" class="size" v-on:click="subNum">-</span>
								<span class="size" v-modle="number">{{number}}</span>
								<span type="button" class="size" v-on:click="addNum">+</span>
							</div>
							<button v-on:click="addItemToCart" style="width: 100px;
							height: 40px;font-size: 20px;margin-top: 20px">添加</button>
						</div>
					</div>


					<div class="clearfix choose">
						<div class="summary-wrap">
							<div class="fl title">
								
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<a href="/page/pay/pay" target="_blank" class="sui-btn  btn-danger addshopcar">立即购买</a>
									</li>
									<li>
										<a target="_blank" class="sui-btn  btn-danger addshopcar" v-on:click="show">加入购物车</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<div class="shop">
						<span class="fl">三星旗舰店</span><span class="fr"><a href="shop.html" target="_blank" class="sui-btn btn-bordered btn-danger">进入店铺</a></span>
					</div>
					<div class="clearfix"></div>
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>{{item.categoryId}}</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part01.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">
					
					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab">
									<span>商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<div v-html="itemDesc">
								</div>
							</div>
							<div id="two" class="tab-pane">
								<p>规格与包装</p>
							</div>
							<div id="three" class="tab-pane">
								<p>售后保障</p>
							</div>
							<div id="four" class="tab-pane">
								<p>商品评价</p>
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>


	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("/page/foot");</script>
	<!--页面底部END-->
	
	<!--侧栏面板开始,由js动态加载-->
	<script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
	<div class="J-global-toolbar"></div>
    <script type="text/javascript">$(".J-global-toolbar").load("/page/side");</script>

<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
	<div class="tbar-cart-item" >
		<div class="jtc-item-promo">
			<em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
			<div class="promo-text">已购满600元，您可领赠品</div>
		</div>
		<div class="jtc-item-goods">
			<span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50" /></a></span>
			<div class="p-name">
				<a href="#">{1}</a>
			</div>
			<div class="p-price"><strong>¥{3}</strong>×{4} </div>
			<a href="#none" class="p-del J-del">删除</a>
		</div>
	</div>
</script>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js" ></script>
<!--侧栏面板结束-->
<script>
	var vue = new Vue({
		el:"#app",
		data:{
			item:null,
			itemDesc:null,
			number:1
		},
		methods:{
			subNum:function(){
				debugger;
				var n=this.number;
				if (n>1){
					this.number--;
				}
			},
			addNum:function(){
				debugger;
				var itemInventory=vue.item.itemInventory
				if (this.number<itemInventory){
					this.number++;
				}else {
					alert("小哥哥好有钱,库存都被你清空了哟");
				}

			},
			selectByItemId:function () {
				debugger;
				var u= window.location.href;
				var str=u.split("/");
				var itemId=str[str.length-1];
				var url="/item/selectByItemId/"+itemId;
				axios.get(url)
						.then(function (res) {
							debugger;
							var result = res.data.data;
							this.vue.item = result;
							console.log(result.itemDesc);
							 this.vue.itemDesc = vue.item.itemDesc;
						})
						.catch()
			},
			addItemToCart:function () {
				debugger;
				let shopCart={
					userId:2,
					itemId:vue.item.itemId,
					shopcartNum:this.number
				}
				var url="/addShopCart";
				axios.post(url,shopCart)
						.then(function (res) {
							debugger;
							alert("添加成功")
							this.vue.hide();
						})
						.catch()
			},
			show:function (){  //显示隐藏层和弹出层
				var hideobj=document.getElementById("hidebg");
				hidebg.style.display="block";  //显示隐藏层
				hidebg.style.height=document.body.clientHeight+"px";  //设置隐藏层的高度为当前页面高度
				document.getElementById("hidebox").style.display="block";  //显示弹出层
			},
	 		hide:function(){  //去除隐藏层和弹出层
				document.getElementById("hidebg").style.display="none";
				document.getElementById("hidebox").style.display="none";
			}

		},
		mounted:function(){
			this.selectByItemId();
		}
	});
</script>

</html>